<!--
 * @Author: Cenven
 * @Date: 2021-06-26 14:00:43
 * @Description: 北京泓深教育发展有限公司
 * @Descripttion: 
 * @version: @Lastest
 * @LastEditTime: 2021-09-29 16:13:42
 * @CopyRight: 北京泓深教育发展有限公司
-->
<template>
  <div class="question_card">
    <div class="question_card_content">
      <div class="question_left_cover">
        <img
          :src="
            (item && item.cover) || '/img/mobile/question_menus_subject.png'
          "
          alt=""
        />
        <img v-if="item.isHot == 1" class="hot_img" src="/img/pc/question_bank_hot.png" alt="" />
      </div>
      <div class="question_center">
        <div class="question_name">{{ item.questionGroupName }}<span v-if="item.deleted == 1">（已过期）</span></div>
        <div class="question_date">
          适用限期：{{ parseTime(item.startTime) }} 至
          {{ parseTime(item.endTime) }}
        </div>
      </div>
      <div class="question_right">
        <!-- <div class="question_btn finish">已完成答题</div>
        <div class="question_btn">重新答题</div> -->
        <!-- <div class="question_btn deleted" v-if="item.deleted == 1">题库过期</div> -->
        <div class="question_btn" @click="toQuestionDetail(item.id)" v-if="item.deleted == 1">重新购买</div>
        <div class="question_btn" @click="toPath(item.id)" v-else>立即答题</div>
      </div>
    </div>
    <div class="question_card_progress" v-if="true">
      <div class="progress">
        <span>进&emsp;度</span
        ><Progress
          style="width:400px;margin:0 20px;"
          :percent="rate_learning"
          :stroke-width="16"
          text-inside
        />
        <span><span style="color:var(--theme-color);">{{item.doneNum}}</span> / {{item.questionNum}}</span>
      </div>
      <div class="correct">
        <span>正确率</span
        ><Progress
          style="width:400px;margin:0 20px;"
          :percent="accuracy"
          :stroke-width="16"
          text-inside
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  name: "question_card",
  props: ["item"],
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      question_record_list(state) {
        return state.questionBank.question_record_list;
      },
      kl_md(state) {
        return state.kl_md;
      }
    }),
    rate_learning(){
      return this.item.totalNum == 0 || this.item.doneNum == 0 ? 0 : parseInt((this.item.doneNum / this.item.totalNum) * 100);
    },
    accuracy(){
      return this.item.accuracy;
    },
    // isDelete(){
    //   return true;
    // },
  },
  watch: {},
  methods: {
    parseTime(time, pattern) {
      if (arguments.length === 0 || !time) {
        return null;
      }
      const format = pattern || "{y}-{m}-{d} {h}:{i}:{s}";
      let date;
      if (typeof time === "object") {
        date = time;
      } else {
        if (typeof time === "string" && /^[0-9]+$/.test(time)) {
          time = parseInt(time);
        } else if (typeof time === "string") {
          time = time.replace(new RegExp(/-/gm), "/");
        }
        if (typeof time === "number" && time.toString().length === 10) {
          time = time * 1000;
        }
        date = new Date(time);
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      };
      const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key];
        // Note: getDay() returns 0 on Sunday
        if (key === "a") {
          return ["日", "一", "二", "三", "四", "五", "六"][value];
        }
        if (result.length > 0 && value < 10) {
          value = "0" + value;
        }
        return value || 0;
      });
      return time_str;
    },
    toQuestionDetail(id){
      this.$router.push({
        path: "/question-detail",
        query: {
          id: id
        }
      });
    },
    toPath(id) {
      this.$router.push({
        path: "/classroom",
        query: {
          action: "myquestion",
          questionId: id
        }
      });
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang="scss" scoped>
.question_card {
  width: 934px;
  //   height: 150px;
  background-color: #ffffff;
  border-radius: 2px;
  box-sizing: border-box;
  padding: 31px 48px;

  .question_card_content {
    display: flex;
    justify-content: space-between;
    .question_left_cover {
      width: 132px;
      height: 88px;
      position: relative;
      .hot_img {
        position: absolute;
        left: 0;
        top: 0;
        width: 35px;
        height: 30px;
      }
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .question_center {
      width: 530px;
      .question_name {
        font-size: 18px;
        font-weight: bold;
        line-height: 26px;
        //   letter-spacing: 2px;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #43474c;
        height: 52px;
      }
      .question_date {
        font-size: 14px;
        font-weight: bold;
        color: #aaadb3;
        margin-top: 8px;
      }
    }
    .question_right {
      width: 120px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .question_btn {
        width: 90px;
        height: 31px;
        line-height: 31px;
        text-align: center;
        background-color: var(--theme-color);
        border-radius: 4px;
        font-size: 14px;
        font-weight: bold;
        color: #ffffff;
        cursor: pointer;
        &.deleted{
          background: #969696;
        }
        &.finish {
          background: #ff8a8a;
        }
      }
    }
  }
  .question_card_progress {
    font-size: 14px;
    color: #8d9199;
    margin-top: 20px;
    .progress {
      margin-bottom: 10px;
      display: flex;
    }
    .correct {
      display: flex;
    }
  }
}
</style>
